import React, { useState, useEffect } from 'react';
import { Layout, Menu, Breadcrumb,Col, Row,Button, Avatar, Popconfirm, message  } from 'antd';



import { BrowserHistory, Router, Route, Link ,Redirect,Switch,useHistory} from 'react-router-dom'
//挂号
import ShuaKaGuaHao from '../../components/MenZhen/GuaHao/ShuaKaGuaHao';
import ZiFeiGuaHao from '../../components/MenZhen/GuaHao/ZiFeiGuaHao';
import ShuaKaGuaHaoChaKan from '../../components/MenZhen/GuaHao/ShuaKaGuaHaoChaKan'
import ZiFeiGuaHaoChaKan from '../../components/MenZhen/GuaHao/ZiFeiGuaHaoChaKan'
import ZiFeiGuaHaoBianJi from '../../components/MenZhen/GuaHao/ZiFeiGuaHaoBianJi'
//门诊计价管理
import jiJiaGuanLi from '../../components/MenZhen/MenZhenJiJiaGuanLi/jiJiaGuanLi'
import TongJi1 from '../../components/MenZhen/MenZhenJiJiaGuanLi/TongJi/TongJi1';
import table1 from '../../components/MenZhen/MenZhenJiJiaGuanLi/table/table1';
import table3 from '../../components/MenZhen/MenZhenJiJiaGuanLi/table/table3';
import table5 from '../../components/MenZhen/MenZhenJiJiaGuanLi/table/table5';
//医疗卡管理
import YiLiaoKaGuanLi from '../../components/MenZhen/YiLiaoKaGuanLi/YiLiaoKaGuanLi';
import TianJia from '../../components/MenZhen/YiLiaoKaGuanLi/TianJia';
import GuaShi from '../../components/MenZhen/YiLiaoKaGuanLi/GuaShi';
import MinXi from '../../components/MenZhen/YiLiaoKaGuanLi/MinXi';
//医生管理
import YiShengGuanLi from '../../components/MenZhen/YiShengGuanLi/YiShengGuanLi';




import './MenZhen.css'
import { UploadOutlined, UserOutlined, BankOutlined, SettingOutlined, AccountBookOutlined, MailOutlined,PoweroffOutlined } from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

const MenZhen = () => {
	 let history = useHistory();
    const [key, setKey] = useState(['1'])
    // const [subKey, setSubKey] = useState(['sub1'])

	   function confirm(e) {
      // console.log(e);
    
      sessionStorage.removeItem("isLogin")
      sessionStorage.removeItem("userInfo")
      history.push("/login")
      message.success('退出成功');
      
    }
    
    function cancel(e) {
      // console.log(e);
      message.error('取消退出登录');
    }
    useEffect(() => {
      setKey(sessionStorage.getItem("key") ? sessionStorage.getItem("key") : sessionStorage.setItem("key", ['1']))
      // setSubKey(sessionStorage.getItem("subKey") ? sessionStorage.getItem("subKey") : sessionStorage.setItem("subKey", ['sub1']))
    })
  
  
    return (
      <Layout className="box">
        <Sider
          breakpoint="lg"
          collapsedWidth="0"
          onBreakpoint={broken => {
            console.log(broken);
          }}
          onCollapse={(collapsed, type) => {
            console.log(collapsed, type);
          }}
        >
          <div className="logo" >门诊部</div>
          <Menu theme="dark"
            mode="inline"
            selectedKeys={key}
            //defaultOpenKeys={['sub1']}
            // openKeys={subKey}
            onSelect={({ item, key, keyPath, selectedKeys, domEvent }) => { sessionStorage.setItem("key", key); setKey(key) }}
          // onOpenChange={(openKeys) => { sessionStorage.setItem("subKey", openKeys); setSubKey(openKeys) }}
          >
            <SubMenu key="sub1" icon={<UserOutlined />} title="挂号">
              <Menu.Item key="1"><Link to="/mz/skgh">刷卡挂号</Link></Menu.Item>
              <Menu.Item key="2"><Link to="/mz/zfgh">自费挂号</Link></Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<BankOutlined />} title=" 门诊计价收费">
               <Menu.Item key="3"><Link to="/mz/jjgl">计价管理</Link></Menu.Item>
              <SubMenu key="4" title="计价统计">
              <Menu.Item key="5"><Link to="/mz/table1">用户计价统计表</Link></Menu.Item>
              <Menu.Item key="8"><Link to="/mz/table3">处方统计表</Link></Menu.Item>
              <Menu.Item key="9"><Link to="/mz/table5">检查项目统计表</Link></Menu.Item>
              </SubMenu>
            </SubMenu>
            <SubMenu key="sub3" icon={<UploadOutlined />} title=" 医疗卡管理">
              <Menu.Item key="6"><Link to="/mz/ylkgl">医疗卡管理</Link></Menu.Item>
            </SubMenu>
            <SubMenu key="sub4" icon={<AccountBookOutlined />} title=" 医生管理">
              <Menu.Item key="7"><Link to="/mz/ysgl">医生管理</Link></Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout >
          <Header className="site-layout-sub-header-background" style={{ padding: 0, fontSize: "20px", textAlign: "center" }} >
			  <Row justify="space-between" align="middle" >
            <Col span={1} offset={20}><Avatar size={34} icon={<UserOutlined />} /></Col>
            <Col spsn={1}>{JSON.parse(sessionStorage.getItem("userInfo")).username}</Col>
            <Col span={2}>
              <Popconfirm
                title="是否退出登录"
                onConfirm={confirm}
                onCancel={cancel}
                okText="是"
                cancelText="否"
              >
                <Button type="primary" icon={<PoweroffOutlined />}>退出登录</Button>
              </Popconfirm>
              </Col>
          </Row>
          </Header>
          <Content style={{ margin: '24px 0px 0 16px' }} className="Right">
   <Switch>
            {/* 挂号 */}
            <Route path="/mz/skgh" component={ShuaKaGuaHao}></Route>
            <Route path="/mz/zfgh" component={ZiFeiGuaHao}></Route>
            <Route path="/mz/skghck" component={ShuaKaGuaHaoChaKan}></Route>
            <Route path="/mz/zfghck" component={ZiFeiGuaHaoChaKan}></Route>
            <Route path="/mz/zfghbj" component={ZiFeiGuaHaoBianJi}></Route>
           {/* 门诊计价管理 */}
            {/* <Route path="/mz/jjtj" component={JiJiaTongJi}></Route>
            <Route path="/mz/jjcx" component={JiJiaChaXun}></Route>
            <Route path="/mz/jjdy" component={JiJiaDaYin}></Route> */}
            <Route path="/mz/jjgl" component={jiJiaGuanLi}></Route>
            <Route path='/mz/TongJi1' component={TongJi1}></Route>
            <Route path="/mz/table1" component={table1}></Route>
            <Route path="/mz/table3" component={table3}></Route>
            <Route path="/mz/table5" component={table5}></Route>
            {/* 医疗卡管理 */}
            <Route path="/mz/ylkgl" component={YiLiaoKaGuanLi}></Route>
            <Route path="/mz/gs" component={GuaShi}></Route>
            <Route path="/mz/tj" component={TianJia}></Route>
            <Route path="/mz/mx" component={MinXi}></Route>
            {/* 医生管理 */}
            <Route path="/mz/ysgl" component={YiShengGuanLi}></Route>
            
    <Redirect to="/mz/skgh" exact from="/mz"></Redirect>
   </Switch>
  
          </Content>
          <Footer style={{ textAlign: 'center' }}>复旦五官科医院管理系统 ©2021</Footer>
        </Layout>
      </Layout>
    );
}

export default MenZhen;
